<template>
	<div style="display: flex;flex-direction: column;" class="otherPage centreOfExcellence professionalGrowth">
		<Header :selected="8"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bgImg? 'background:url('+bgImg+') no-repeat;background-size:cover; ':''"></div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :checked="2" :bgColor="bgColor">
		</Navigation>
		<div class="content"  >
			<div class="content_bg" style=" display: flex;
  align-items: center; 
    justify-content: center;
  ">
				<img :src="data.fileUrl" class="img"   />
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../components/common/header/Header.vue'
	import Navigation from '../../components/common/navigation/Navigation.vue'
	import Footer from '../../components/common/footer/Footer.vue'
	import {
		centreOfExcellenceMenu
	} from '../../utils/menu.js'
	// 导入您需要的模块
	import Swiper from "swiper";
	export default {
		components: {
			Header,
			Navigation,
			Footer
		},
		data() {
			return {
				loading: true,
				bgImg: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				menus: centreOfExcellenceMenu,
				breadcrumbItems: [{
						label: this.$t('home'),
						to: '/'
					},
					{
						label: this.$t('centreOfExcellence'),
						to: '/centreOfExcellence'
					},
					{
						label: this.$t('professionalGrowth'),
						to: '/professionalGrowth'
					}
				],
				hoverIndex: -1,
				data: {
					content: ""
				}
			};
		},
		computed: {},
		created() {},
		mounted() {
			this.bindBg()
			this.bindCareerDevelopment().then(i => {
				this.$request.setImageMaxwidth("img");
			});
		},
		methods: {
			/**
			 * 获取职业发展内容
			 */
			bindCareerDevelopment() {
				return new Promise((resolve, reject) => {
					let params = {};
					let that = this;
					that.$request.getCareerDevelopment(params).then(res => {
						this.data = res.data
						this.loading = false;
						resolve();
					}).catch((error) => {
						console.log(error);
					});
				});
			},
			/**
			 * 获取职业发展顶部背景
			 */
			bindBg() {
				let params = {};
				let that = this;
				that.$request.getCareerDevelopmentTopImage(params).then(res => {
					this.bgImg = res.data.fileUrl
				}).catch((error) => {
					console.log(error);
				});
			},
		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/corporateOverview/companyProfile.css");

	.img {

		width: 65%;
		height: auto;

	}

	@media (max-width: 1024px) {

		.img {

			width: 100%;


		}
	}
	
	.content_bg {
		padding: 0;
		margin: 0 auto;
	}
	
	@media screen and (max-width: 1080px) {}
	
	
	
	@media (min-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}
	}
	
	@media (max-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}
	}
	
	@media (max-width: 2320px) {
		.content_bg {
			width: calc(2320px * 0.8);
		}
	}
	
	@media (max-width: 2120px) {
		.content_bg {
			width: calc(2120px * 0.8);
		}
	}
	
	@media (max-width: 1920px) {
		.content_bg {
			width: calc(1920px * 0.8);
		}
	
		.companyCultureImgArea {
			width: 60%;
		}
	
	 
	
	}
	
	@media (max-width: 1720px) {
	
	
		.content_bg {
			width: calc(1720px * 0.8);
		}
	}
	
	@media (max-width: 1520px) {
		.content_bg {
			width: calc(1520px * 0.8);
		}
	}
	
	@media (max-width: 1366px) {
		.content_bg {
			width: calc(1366px * 0.8);
		}
	}
	
	@media (max-width: 1120px) {
		.content_bg {
			width: 100%
		}
	}
	
	@media (max-width: 1024px) {}
	
	@media (max-width: 900px) {}
	.professionalGrowth .content_bg{
		min-height: 0;
	}
</style>